@import "./mall-common";

body {
    background-color: #f2f2f2 !important;

    section {
        margin-bottom: 45px;

        // 轮播图
        .banner {
            position: relative;
            height  : 450px;
            overflow: hidden;

            .slider {
                position: absolute;
                top     : 0;
                left    : 0;
                width   : 300%;
                height  : 100%;
                margin  : 0;

                li {
                    width : 33.333333%;
                    height: 100%;
                    float : left;

                    img {
                        display: block;
                        width  : 100%;
                        height : 100%;
                    }
                }
            }

            ol {
                width    : 78px;
                height   : 27px;
                position : absolute;
                bottom   : 20px;
                left     : 50%;
                transform: translateX(-50%);

                li {
                    display      : block;
                    float        : left;
                    width        : 12px;
                    height       : 12px;
                    margin       : 5px 7px;
                    border-radius: 20px;
                    background   : #FFF;
                }

                .active {
                    background: #7b858c;
                }
            }
        }

        // 商城首页
        .mall_main {
            margin-top: 20px;

            // 快速导航
            .fast_nav {
                .left {
                    float     : left;
                    width     : 232px;
                    height    : 174px;
                    padding   : 17px 0;
                    background: url(../images/mall/fastnavL-bg.png) center no-repeat #fff;

                    a {
                        display        : block;
                        float          : left;
                        width          : 75px;
                        height         : 58px;
                        display        : flex;
                        flex-direction : column;
                        align-items    : center;
                        font-size      : 12px;
                        color          : #757575;
                        text-decoration: none;

                        &:hover {
                            color: #ee0a3b;
                        }

                        i {
                            display    : block;
                            height     : 40px;
                            line-height: 40px;
                        }

                        .iconfont {
                            font-size: 31px;
                        }

                        &:nth-of-type(2) {
                            width: 82px;
                        }

                        &:nth-of-type(5) {
                            width: 82px;
                        }

                        &:nth-of-type(n+4) {
                            margin-top: 24px;
                        }
                    }
                }

                .right {
                    float: right;

                    a {
                        display: block;
                        width  : 314px;
                        height : 174px;
                        float  : left;

                        &:hover {
                            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                        }

                        &:nth-of-type(n+2) {
                            margin-left: 15px;
                        }

                        img {
                            width : 100%;
                            height: 100%;
                        }
                    }
                }
            }

            // 活动专区
            .activity {
                h2 {
                    font-size    : 22px;
                    color        : #263746;
                    margin-bottom: 14px;
                }

                .activity_left {
                    transition: all .2s linear;

                    &:hover {
                        transform : translateY(-2px);
                        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                    }

                    img {
                        display: block;
                        height : 340px;
                    }
                }

                .activity_right {
                    transform: translateX(15px);

                    li {
                        width: 247px;
                        float: left;

                        .item {
                            width           : 232px;
                            height          : 340px;
                            margin-right    : 15px;
                            margin-bottom   : 15px;
                            display         : flex;
                            flex-direction  : column;
                            align-items     : center;
                            background-color: #fff;

                            a {
                                display        : block;
                                font-size      : 16px;
                                text-decoration: none;
                                color          : #263746;

                                &:first-of-type {
                                    margin-bottom: 25px;
                                }
                            }

                            span {
                                font-size: 14px;
                                color    : #828282;
                            }

                            .pirce {
                                margin-top: 10px;
                                font-size : 16px;
                                color     : #ee0a3b;

                                div {
                                    display  : inline-block;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }

            // 热销单品
            .hot {
                h2 {
                    font-size    : 22px;
                    color        : #263746;
                    margin-bottom: 14px;
                }

                .hot_left {
                    width     : 232px;
                    height    : 615px;
                    transition: all .2s linear;

                    &:hover {
                        transform : translateY(-2px);
                        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                    }

                    img {
                        display: block;
                        width  : 100%;
                        height : 100%;
                    }
                }

                .hot_right {
                    width        : 988px;
                    margin-bottom: 0;

                    li {
                        width           : 232px;
                        height          : 300px;
                        margin-left     : 15px;
                        margin-bottom   : 15px;
                        background-color: #fff;
                        float           : left;
                        transition      : all .2s linear;

                        &:hover {
                            transform : translateY(-2px);
                            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                        }

                        .item {
                            display       : flex;
                            flex-direction: column;
                            align-items   : center;


                            &:last-of-type {
                                margin-right: 0;
                            }

                            a {
                                display        : block;
                                font-size      : 16px;
                                text-decoration: none;
                                color          : #263746;
                            }

                            span {
                                font-size: 14px;
                                color    : #828282;
                            }

                            .pirce {
                                margin-top: 5px;
                                font-size : 16px;
                                color     : #ee0a3b;

                                div {
                                    display  : inline-block;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }

            //  通栏广告 
            .main_ad {
                &:hover {
                    transform : translateY(-2px);
                    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                }

                a {
                    transition: all 2s;

                    &:last-of-type {
                        display: none;
                    }

                    img {
                        display: block;
                        width  : 100%;
                        height : 140px;
                    }
                }
            }

            // 配件专区
            .parts {
                h2 {
                    font-size    : 22px;
                    color        : #263746;
                    margin-bottom: 14px;
                }

                .parts_left {
                    width     : 232px;
                    height    : 300px;
                    transition: all .2s linear;

                    &:hover {
                        transform : translateY(-2px);
                        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                    }

                    img {
                        display: block;
                        width  : 100%;
                        height : 100%;
                    }
                }

                .parts_right {
                    width        : 988px;
                    margin-bottom: 0;

                    li {
                        width           : 232px;
                        height          : 300px;
                        margin-left     : 15px;
                        margin-bottom   : 15px;
                        background-color: #fff;
                        float           : left;
                        transition      : all .2s linear;

                        &:hover {
                            transform : translateY(-2px);
                            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                        }

                        .item {
                            display       : flex;
                            flex-direction: column;
                            align-items   : center;

                            a {
                                display        : block;
                                font-size      : 16px;
                                text-decoration: none;
                                color          : #263746;
                            }
                        }
                    }
                }
            }

            .fond {
                h2 {
                    font-size    : 22px;
                    height       : 33px;
                    line-height  : 33px;
                    color        : #263746;
                    margin-bottom: 14px;
                }

                ul {
                    li {
                        width           : 232px;
                        height          : 340px;
                        margin-left     : 15px;
                        margin-bottom   : 15px;
                        background-color: #fff;
                        float           : left;
                        transition      : all 0.2s linear;

                        &:hover {
                            transform : translateY(-2px);
                            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                        }

                        &:first-of-type {
                            margin-left: 0;
                        }

                        .item {
                            display       : flex;
                            flex-direction: column;
                            align-items   : center;

                            a {
                                display        : block;
                                font-size      : 16px;
                                text-decoration: none;
                                color          : #263746;

                                &:first-of-type {
                                    margin-bottom: 25px;
                                }
                            }

                            span {
                                font-size: 14px;
                                color    : #828282;
                            }

                            .pirce {
                                margin-top: 10px;
                                font-size : 16px;
                                color     : #ee0a3b;

                                div {
                                    display  : inline-block;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}